CSS Containmentãçè§£ãããããã©ã®ããã«ã³ã³ããã®å¯žæ³ãåé¢ããŠãŠã§ãããã©ãŒãã³ã¹ãåäžãããäžçäžã®æ§ã ãªãã©ãŠã¶ãããã€ã¹ã§ãã¶ã€ã³ã®äºæž¬å¯èœæ§ãé«ããããåŠã³ãŸãã
CSS Containmentãããã¯ãµã€ãºïŒã³ã³ãã寞æ³ã®åé¢
é²åãç¶ãããŠã§ãéçºã®äžçã«ãããŠãæé©åã¯æãéèŠã§ããããã©ãŒãã³ã¹ãäºæž¬å¯èœæ§ãä¿å®æ§ã¯ãå ç¢ã§ã¹ã±ãŒã©ãã«ãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®éèŠãªèæ ®äºé ã§ãããããã®ç®æšãéæããããã®åŒ·åãªææ³ã®äžã€ããCSS Containmentã®æŽ»çšã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ãã³ã³ãã€ã³ã¡ã³ãã®æŠå¿µãæ¢æ±ããç¹ã«ãããã³ã³ããã®å¯žæ³åé¢ã«ã©ã®ããã«åœ±é¿ããããããã©ãŒãã³ã¹ãžã®åœ±é¿ããããŠäžçäžã®å€æ§ãªãã©ãŠã¶ãããã€ã¹éã§ãããæŽçããäºæž¬å¯èœãªã¬ã€ã¢ãŠãã«ã©ã®ããã«è²¢ç®ãããã«çŠç¹ãåœãŠãŸãã
CSS Containmentãçè§£ãã
CSS Containmentã¯ããŠã§ãããŒãžã®äžéšãããã¥ã¡ã³ãã®ä»ã®éšåããåé¢ã§ããã匷åãªããã©ãŒãã³ã¹åäžæ©èœã§ããèŠçŽ ãåé¢ããããšã§ããã©ãŠã¶ã¯ã¬ã³ããªã³ã°ããã»ã¹ãæé©åã§ããç¹ã«è€éãªã¬ã€ã¢ãŠãã«ãããŠå€§å¹ ãªããã©ãŒãã³ã¹æ¹åã«ã€ãªãããŸããããã¯æ¬è³ªçã«ãã©ãŠã¶ã«ããã®ã³ã³ããã®å€ã«ãããã®ã®å¯žæ³ãã¹ã¿ã€ã«ãèšç®ããéã«ããã®ã³ã³ããã®äžã®ãã®ã¯èæ ®ããå¿ èŠããªãããšäŒããŸããããã«ãããèšç®ãå°ãªããªããã¬ã³ããªã³ã°ãé«éåãããŸãã
CSSã®`contain`ããããã£ã¯ãã³ã³ãã€ã³ã¡ã³ããå®è£ ããããã®äž»èŠãªã¡ã«ããºã ã§ããããã¯æ§ã ãªå€ãåãå ¥ãããããããã³ã³ãã€ã³ã¡ã³ãã®ç°ãªãåŽé¢ãæå®ããŸãããããã®å€ã¯ããã©ãŠã¶ãèŠçŽ ã®åå«ãããã¥ã¡ã³ãã®ä»ã®éšåããã©ã®ããã«åé¢ããããå¶åŸ¡ããŸãããããã®å€ãçè§£ããããšã¯ãCSS Containmentã广çã«å©çšããããã«äžå¯æ¬ ã§ãã
`contain`ããããã£ã®äž»èŠãªå€ïŒ
- `contain: none;`: ããã¯ããã©ã«ãå€ã§ããã³ã³ãã€ã³ã¡ã³ããé©çšãããªãããšãæå³ããŸããèŠçŽ ã¯äžååé¢ãããŸããã
- `contain: strict;`: ããã¯æã匷åãªåœ¢åŒã®ã³ã³ãã€ã³ã¡ã³ããæäŸããŸããä»ã®ãã¹ãŠã®ã³ã³ãã€ã³ã¡ã³ã圢åŒïŒsize, layout, paint, styleïŒãå å ããŸããã³ã³ããã®ã³ã³ãã³ããããŒãžäžã®ä»ã®ãã®ã®ã¬ã€ã¢ãŠããã¬ã³ããªã³ã°ã«åœ±é¿ãäžããªãããšãããã£ãŠããå Žåã«é©ããŠããŸãã
- `contain: content;`: èŠçŽ ã®ã³ã³ãã³ãé åã«ã³ã³ãã€ã³ã¡ã³ããé©çšããŸããèŠçŽ ã®ã³ã³ãã³ãã®ã¬ã€ã¢ãŠããšãã€ã³ãã®æé©åã®ã¿ãèæ ®ããå Žåã«ãã°ãã°é©ããŠããŸããããã¯`contain: size layout paint`ãå å ããŸãã
- `contain: size;`: èŠçŽ ã®ãµã€ãºãåé¢ããŸããèŠçŽ ã®ãµã€ãºã¯ç¬ç«ããŠèšç®ããããã®ç¥å ãå åŒã®ãµã€ãºèšç®ã«åœ±é¿ãäžããã®ãé²ããŸããããã¯ãå¯å€ã³ã³ãã³ããæã€èŠçŽ ã®ã¬ã³ããªã³ã°ãæé©åããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
- `contain: layout;`: èŠçŽ ã®ã¬ã€ã¢ãŠããåé¢ããŸããèŠçŽ ã®ã³ã³ãã³ãã®å€æŽãããã®å€åŽã®èŠçŽ ã®ã¬ã€ã¢ãŠãæŽæ°ãåŒãèµ·ãããªããªããŸããããã«ãããé£éçãªã¬ã€ã¢ãŠãåèšç®ãåé¿ã§ããŸãã
- `contain: paint;`: èŠçŽ ã®æç»ãåé¢ããŸããèŠçŽ ã®æç»æäœã¯ä»ã®èŠçŽ ã®æç»æäœããç¬ç«ããŸããããã¯ãèŠçŽ ã倿Žããããšãã«ããŒãžå šäœãåæç»ããå¿ èŠæ§ãæå°éã«æãããããããã©ãŒãã³ã¹ã«æçã§ãã
- `contain: style;`: èŠçŽ ã«é©çšãããã¹ã¿ã€ã«ãåé¢ããŸããåç¬ã§äœ¿çšãããããšã¯å°ãªãã§ãããç¹å®ã®ã·ããªãªã§åœ¹ç«ã€ããšããããŸãã
ã³ã³ãã寞æ³ã®åé¢ã«ã€ããŠã®è§£èª¬
ã³ã³ãã寞æ³ã®åé¢ãå ·äœçã«ã¯`contain: size`ããããã£ã¯ãç¹ã«åŒ·åãªã³ã³ãã€ã³ã¡ã³ãã®åœ¢åŒã§ããèŠçŽ ã«`contain: size`ãé©çšãããšããã©ãŠã¶ã«å¯Ÿãããã®èŠçŽ ã®ãµã€ãºã¯å®å šã«èªèº«ã®ã³ã³ãã³ããšã¹ã¿ã€ã«ã«ãã£ãŠæ±ºå®ããããã®èŠªãå åŒèŠçŽ ã®ãµã€ãºèšç®ã«åœ±é¿ãäžããªãããšããããŠéã«ããã®èŠçŽ ã®ãµã€ãºã¯èŠªã®ãµã€ãºã«åœ±é¿ãããªãããšãäŒããŸããããã¯ãç¹ã«ä»¥äžã®ã·ããªãªã§ããã©ãŒãã³ã¹ãšäºæž¬å¯èœæ§ã«ãšã£ãŠéèŠã§ãã
- ã¬ã¹ãã³ã·ããã¶ã€ã³: ã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠãã§ã¯ãèŠçŽ ã¯ãã°ãã°ç°ãªãç»é¢ãµã€ãºãåãã«é©å¿ããå¿ èŠããããŸãã`contain: size`ã¯ãããã®èŠçŽ ã®ã¬ã³ããªã³ã°ãæé©åããã®ã«åœ¹ç«ã¡ãã³ã³ããå ã®ãµã€ãºå€æŽãããŒãžå šäœã®äžèŠãªåèšç®ãåŒãèµ·ãããªãããã«ããŸããäŸãã°ããã¹ã¯ããããšã¢ãã€ã«ã®äž¡æ¹ã®ããã«æ§ç¯ããããã¥ãŒã¹ãã£ãŒãã¢ããªã±ãŒã·ã§ã³ã®ã«ãŒãã³ã³ããŒãã³ãã¯ã`contain: size`ã䜿çšããŠç»é¢ãµã€ãºã倿Žãããéã®å¯žæ³ãå¹ççã«ç®¡çã§ããŸãã
- å¯å€ã³ã³ãã³ã: èŠçŽ ã®ã³ã³ãã³ããåçã§ããã®ãµã€ãºãäºæž¬äžå¯èœãªå Žåã`contain: size`ã¯éåžžã«è²Žéã§ããèŠçŽ ã®ãµã€ãºå€æŽãããŒãžäžã®ä»ã®èŠçŽ ã®ã¬ã€ã¢ãŠãã«åœ±é¿ãäžããã®ãé²ããŸããåã³ã¡ã³ãã®ã³ã³ãã³ãé·ãç°ãªãå¯èœæ§ãããã³ã¡ã³ãã»ã¯ã·ã§ã³ãèããŠã¿ãŠãã ãããåã³ã¡ã³ãã«`contain: size`ã䜿çšãããšããã©ãŒãã³ã¹ãåäžããŸãã
- ããã©ãŒãã³ã¹æé©å: ãµã€ãºèšç®ãåé¢ããããšã¯ãããã©ãŒãã³ã¹ãåçã«åäžãããŸãããã©ãŠã¶ã®ã¬ã€ã¢ãŠãèšç®ã®ç¯å²ãå¶éããããšã§ã`contain: size`ã¯ããŒãžã®ã¬ã³ããªã³ã°ã«ãããæéãå€§å¹ ã«ççž®ããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
å®è·µäŸïŒã€ã¡ãŒãžã®ã£ã©ãªãŒ
ããã€ãã®ãµã ãã€ã«ãããã€ã¡ãŒãžã®ã£ã©ãªãŒãæ³åããŠãã ãããåãµã ãã€ã«ã¯ã¯ãªãã¯ãããšå€§ããªãµã€ãºã«æ¡å€§ããŸãã`contain: size`ããªãå Žåã1ã€ã®ãµã ãã€ã«ãæ¡å€§ãããšããµã€ãºå€æŽããã®ãµã ãã€ã«å ã«åãŸã£ãŠããã«ãããããããã®ã£ã©ãªãŒå šäœã®ã¬ã€ã¢ãŠãåèšç®ïŒãªãããŒïŒãåŒãèµ·ããå¯èœæ§ããããŸããåãµã ãã€ã«ã«`contain: size`ã䜿çšãããšããããé²ãããšãã§ããŸããæ¡å€§ããããµã ãã€ã«ã®ãµã€ãºå€æŽã¯åé¢ããããã®ãµã ãã€ã«èªäœã ããåæç»ãããå¿ èŠããããŸããããã«ãããã¯ããã«é«éã§å¹ççãªã¬ã³ããªã³ã°ããã»ã¹ãå®çŸããŸãã
<div class="gallery">
<div class="thumbnail">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="thumbnail">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="thumbnail">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
.thumbnail {
contain: size;
width: 100px;
height: 100px;
overflow: hidden; /* To prevent overflow */
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.thumbnail:hover img {
transform: scale(1.1);
}
ãã®äŸã§ã¯ã`contain: size`ããããã£ãå`.thumbnail` divã«é©çšãããŠããŸãããµã ãã€ã«å ã®ç»åããããŒæã«æ¡å€§ãããŠãããã®ç¹å®ã®ãµã ãã€ã«ã®ã¿ã圱é¿ãåããã®ã£ã©ãªãŒå šäœã®ã¬ã€ã¢ãŠãããã©ãŒãã³ã¹ã¯ç¶æãããŸãããã®ãã¶ã€ã³ãã¿ãŒã³ã¯ãeã³ããŒã¹ã®è£œå衚瀺ããã€ã³ã¿ã©ã¯ãã£ããªããŒã¿å¯èŠåãŸã§ãäžçäžã§åºãé©çšå¯èœã§ãã
ã³ã³ãã寞æ³åé¢ã®å©ç¹
ã³ã³ãã寞æ³ã®åé¢ãç¹ã«`contain: size`ãå®è£ ããããšã¯ããŠã§ãéçºè ãšãŠãŒã¶ãŒã®åæ¹ã«å¹ åºãå©ç¹ããããããŸãã
- ããã©ãŒãã³ã¹ã®åäž: ã¬ã€ã¢ãŠãèšç®ãšåæç»ãæžå°ããããšã§ãã¬ã³ããªã³ã°æéãççž®ãããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããŸããããã¯ç¹ã«äœã¹ããã¯ã®ããã€ã¹ãé ããããã¯ãŒã¯æ¥ç¶ã§æçã§ãããã°ããŒãã«ãªã¢ã¯ã»ã·ããªãã£ã«ãšã£ãŠéèŠã§ãã
- äºæž¬å¯èœæ§ã®åäž: èŠçŽ ã®ãµã€ãºãåé¢ããããšã§ãã¬ã€ã¢ãŠãã®æšè«ããããã°ã容æã«ãªããŸããã³ã³ããå ã®å€æŽãããŒãžã®ä»ã®éšåã«äºæãã圱é¿ãäžããå¯èœæ§ãäœããªããŸãã
- ä¿å®æ§ã®åäž: ã¬ã€ã¢ãŠãèšç®ã®ç¯å²ãå¶éããããšã§ã`contain: size`ã¯ã³ãŒããç°¡çŽ åããã¬ã€ã¢ãŠãã®ä¿å®ãšå€æŽã容æã«ããŸãã
- ã¬ã¹ãã³ã·ãæ§ã®åäž: èŠçŽ ã®ãµã€ãºå€æŽã¯åé¢ãããŸããããã¯ãã³ã³ããå ã®ãµã€ãºå€æŽãããŒãžå šäœã®äžèŠãªåèšç®ãåŒãèµ·ããããããã©ãŒãã³ã¹ãäžè²«ããŠç¶æãããããšãæå³ããŸãã
- ãªãœãŒã¹äœ¿çšã®æé©å: ãã©ãŠã¶ã¯ã³ã³ããå ã®å€æŽã®ã¿ãåŠçããå¿ èŠããããŸãããµã€ãºèšç®ãå°ã蟌ããããšã§ããã©ãŠã¶ã¯ãªãœãŒã¹ãããå¹ççã«äœ¿çšã§ããããã¯æç¶å¯èœæ§ã«ãšã£ãŠäžå¯æ¬ ã§ãã
å®éã®å¿çšäŸ
CSS Containmentãç¹ã«ã³ã³ãã寞æ³ã®åé¢ã®å¿çšç¯å²ã¯åºããäžçäžã®æ§ã ãªæ¥çããŠã§ããã¶ã€ã³ãã¿ãŒã³ã«åã³ãŸãã
- eã³ããŒã¹ã®è£œåãªã¹ã: eã³ããŒã¹ã¹ãã¢ã§ã¯ãå補åã«ãŒããäžã€ã®å°ã蟌ãããããŠããããšããŠæ±ãããšãã§ããŸããã«ãŒãã®ãµã€ãºãã³ã³ãã³ãã倿ŽãããŠããä»ã®è£œåã«ãŒããããŒãžå šäœã®æ§é ã«åœ±é¿ãäžããŸãããããã¯ã補å説æãç»åãäŸ¡æ Œåœ¢åŒãå€åããã°ããŒãã«åžå Žã§ç¹ã«æçã§ãã
- ã€ã³ã¿ã©ã¯ãã£ãããã: ã€ã³ã¿ã©ã¯ãã£ããããã«ã¯ããºãŒã ããã³æ©èœããããããŸãããããèŠçŽ ã«`contain: size`ã䜿çšãããšãããããæäœãããéã®äžèŠãªã¬ã€ã¢ãŠãæŽæ°ãé²ããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããããã¯ãç±³åœã®ããã²ãŒã·ã§ã³ã¢ããªããæ¥æ¬ã®èгå ãã©ãããã©ãŒã ãŸã§ãæ§ã ãªã¢ããªã±ãŒã·ã§ã³ã§åœ¹ç«ã¡ãŸãã
- ãã¥ãŒã¹ãã£ãŒããšãœãŒã·ã£ã«ã¡ãã£ã¢ã¹ããªãŒã : ãã¥ãŒã¹ãã£ãŒãããœãŒã·ã£ã«ã¡ãã£ã¢ã¹ããªãŒã ã§ã¯ãåæçš¿ãå°ã蟌ããããšãã§ããŸããã³ã³ãã³ããç»åããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã®ããªãšãŒã·ã§ã³ã¯åæçš¿ã«å±æåããã倧éã®ããŒã¿ãæ±ãã¢ããªã±ãŒã·ã§ã³å šäœã®ããã©ãŒãã³ã¹ãåäžãããŸããããã¯ããããã¯ãŒã¯ç¶æ³ãå€åããå¯èœæ§ã®ããEUãã¢ãžã¢å€ªå¹³æŽå°åã®ãŠãŒã¶ãŒã«å¯Ÿå¿ããããã«äžå¯æ¬ ã§ãã
- åçã³ã³ãã³ãé å: åã蟌ã¿ãããªãiframeãªã©ãå€éšãœãŒã¹ããåçã«ã³ã³ãã³ããèªã¿èŸŒãé åã¯ãã³ã³ãã€ã³ã¡ã³ããã倧ããªæ©æµãåããŸãããããã®åã蟌ã¿ãªãœãŒã¹ã®ãµã€ãºãšã¬ã€ã¢ãŠãã¯åé¢ãããããŒãžã®ä»ã®éšåã®ã¬ã€ã¢ãŠããžã®åœ±é¿ãé²ããŸãã
- ãŠã§ãã³ã³ããŒãã³ã: åå©çšæ§ãç®çã«èšèšããããŠã§ãã³ã³ããŒãã³ãã¯ãã³ã³ãã€ã³ã¡ã³ããšçµã¿åãããããšã§ããã«å¹æçã«ãªããŸããããã«ããèªå·±å®çµåã®ãŠããããäœæããã倿§ãªã¢ããªã±ãŒã·ã§ã³ã§ã®éçºãšå±éãç°¡çŽ åãããŸããããã¯ããŠã§ããã¬ãŒã³ã¹ã®äžè²«æ§ã®ããã«ãã¶ã€ã³ã·ã¹ãã ãæ¡çšããŠããçµç¹ã«ç¹ã«é¢é£ããŸãã
äŸïŒé«ããå€åããã³ã³ãã³ãã«ãŒã
ããã¹ããç»åããã®ä»ã®åçã³ã³ãã³ãã衚瀺ã§ããã·ã³ãã«ãªã³ã³ãã³ãã«ãŒããèããŠã¿ãŸããããã«ãŒãã®é«ãã¯ãç¹ã«äžçäžã®è€æ°ã®èšèªããã®ããã¹ããªã©ãã³ã³ãã³ãã®éã«ãã£ãŠå€åããå¯èœæ§ããããŸããã«ãŒãã«`contain: size`ã䜿çšãããšããããã®é«ãã®å€æŽãããŒãžäžã®ä»ã®èŠçŽ ã®ã¬ã€ã¢ãŠã倿ŽãåŒãèµ·ãããªãããã«ã§ããŸãã
<div class="card">
<h2>Card Title</h2>
<p>This is some content that can vary in length.</p>
<img src="image.jpg" alt="">
</div>
.card {
contain: size;
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
}
ãã©ãŠã¶ã®äºææ§ãšèæ ®äºé
CSS Containmentã¯çŸä»£ã®ãã©ãŠã¶ã§åºããµããŒããããŠããŸããããããžã§ã¯ãã«å®è£ ããéã«ã¯ãã©ãŠã¶ã®äºææ§ãèæ ®ããããšãäžå¯æ¬ ã§ãã`contain`ããããã£ã¯è¯å¥œãªãµããŒãç¶æ³ã«ããã`size`å€ãäž»èŠãªãã©ãŠã¶ã§åºããµããŒããããŠããŸããäžè²«ããçµæãä¿èšŒããããã«ãåžžã«ç°ãªããã©ãŠã¶ïŒChrome, Firefox, Safari, EdgeïŒãããã€ã¹ã§å®è£ ããã¹ãããŠãã ãããCSS Containmentãå®å šã«ã¯ãµããŒãããŠããªãå€ããã©ãŠã¶ãé©åã«åŠçããããã«ãæ©èœæ€åºã®äœ¿çšãæ€èšããŠãã ããã
ãã©ãŠã¶äºææ§ã®ããã®ãã¹ããã©ã¯ãã£ã¹ïŒ
- æ©èœæ€åº: æ©èœã¯ãšãªïŒäŸïŒ`@supports (contain: size)`ïŒã䜿çšããŠããµããŒãããŠãããã©ãŠã¶ã«ã®ã¿ã³ã³ãã€ã³ã¡ã³ãã¹ã¿ã€ã«ãé©çšããŸãã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã: ã³ã³ãã€ã³ã¡ã³ãããµããŒããããŠããªãå Žåã§ãããŸãæ©èœããããã«ã¬ã€ã¢ãŠããèšèšããå©çšå¯èœãªå Žåã«ããã©ãŒãã³ã¹ã®æé©åã远å ããŸãã
- 培åºçãªãã¹ã: ã¢ãã€ã«ããã€ã¹ãå«ãè€æ°ã®ãã©ãŠã¶ãããã€ã¹ã§ãã¹ãããæé©ãªã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããŸãã
CSS Containmentãã¯ãŒã¯ãããŒã«çµ±åãã
CSS Containmentãç¹ã«ã³ã³ãã寞æ³ã®åé¢ãéçºã¯ãŒã¯ãããŒã«å¹æçã«çµ±åããããšã¯ããã®å©ç¹ãæå€§åããããã«äžå¯æ¬ ã§ãã
- ã³ã³ãã€ã³ã¡ã³ãã®æ©äŒãç¹å®ãã: ã¬ã€ã¢ãŠããåæãããµã€ãºã®å€æŽãã³ã³ãã³ãã®æŽæ°ããŸãã¯ã€ã³ã¿ã©ã¯ã·ã§ã³ãã³ã³ãã€ã³ã¡ã³ãããæ©æµãåããå¯èœæ§ã®ããèŠçŽ ãç¹å®ããŸããåçã³ã³ãã³ããè€éãªã€ã³ã¿ã©ã¯ã·ã§ã³ãæã€ã³ã³ããŒãã³ãããŸãã¯ã¢ããªã±ãŒã·ã§ã³å šäœã§ç¹°ãè¿ã䜿çšãããã³ã³ããŒãã³ããæ€èšããŠãã ããã
- `contain: size`ãæŠç¥çã«é©çšãã: ããã©ãŒãã³ã¹åäžãšäºæããªãåäœã®å¯èœæ§ãšã®ãã©ã³ã¹ãåããªããã`contain: size`ãæ éã«é©çšããŸããã³ã³ãã€ã³ã¡ã³ããé床ã«äœ¿çšãããšãå¿ èŠãªã¬ã€ã¢ãŠãæŽæ°ã劚ããå Žåãæªåœ±é¿ãåãŒãããšããããŸãã
- ããã©ãŒãã³ã¹ããã¹ãã»æž¬å®ãã: ã³ã³ãã€ã³ã¡ã³ããé©çšããååŸã®ã¬ã€ã¢ãŠãã®ããã©ãŒãã³ã¹ã枬å®ãããã®å©ç¹ãå®éåããŸãããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠã¬ã³ããªã³ã°æéãåæããæé©åã®é åãç¹å®ããŸããChrome DevToolsã®ãããªããŒã«ã¯ãã³ã³ãã€ã³ã¡ã³ããå šäœã®é床ãã©ã®ããã«åäžããããã瀺ãããã©ãŒãã³ã¹ãããã¡ã€ãªã³ã°æ©èœãæäŸããŸãã
- 決å®ãææžåãã: CSS Containmentãå®è£ ããçç±ãšå ŽæãææžåããŠãããŒã ã«æ å ±ãæäŸããŸããããã«ãããä»ã®äººãã³ãŒããçè§£ããä¿å®ãããããªããŸãã
- 宿çãªã³ãŒãã¬ãã¥ãŒ: ããŒã ã§ã³ãŒãã¬ãã¥ãŒã宿œãããã¹ããã©ã¯ãã£ã¹ãå®ãããäžè²«æ§ãç¶æãããŠããããšã確èªããããã«ãCSS Containmentã®äœ¿çšã«ç¹ã«æ³šæãæããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
`contain: size`ã®åºæ¬çãªå®è£ ãè¶ ããŠãããã€ãã®é«åºŠãªãã¯ããã¯ãšèæ ®äºé ããããŸãã
- ã³ã³ããã¯ãšãª: CSS Containmentã®äžéšã§ã¯ãããŸããããã³ã³ããã¯ãšãªã¯ãããè£å®ããã³ã³ããã®ãµã€ãºã«åºã¥ããŠèŠçŽ ãã¹ã¿ã€ãªã³ã°ã§ããããã«ããŸããããã«ãããã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠããäœæããéã®å¶åŸ¡ãšæè»æ§ãåäžããã³ã³ãã寞æ³ã®åé¢ãããã«åŒ·åã«ãªããŸãã
- ä»ã®ãã¯ããã¯ãšã®çµã¿åãã: CSS Containmentã¯ãç»åã®é å»¶èªã¿èŸŒã¿ãã³ãŒãåå²ãã¯ãªãã£ã«ã«CSSãªã©ã®ä»ã®æé©åãã¯ããã¯ãšéåžžã«çžæ§ãè¯ãã§ãããŠã§ãããã©ãŒãã³ã¹ãžã®å æ¬çãªã¢ãããŒãã®ããã«ããããã®ä»ã®ãã¯ããã¯ãšã³ã³ãã€ã³ã¡ã³ãã䜵çšããããšãæ€èšããŠãã ããã
- ããã©ãŒãã³ã¹ããžã§ãã: ãããžã§ã¯ãã«ããã©ãŒãã³ã¹ããžã§ãããèšå®ãããŠã§ãããŒãžãç¹å®ã®ããã©ãŒãã³ã¹ç®æšãéæããããã«ããŸããCSS Containmentã¯ãã¬ã€ã¢ãŠãèšç®ã®æ°ãæžããããšã§ããããã®ããžã§ããå ã«åããã®ã«åœ¹ç«ã¡ãŸãã
- ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé : CSS Containmentã¯äž»ã«ããã©ãŒãã³ã¹ã«åœ±é¿ããŸãããå®è£ ãã¢ã¯ã»ã·ããªãã£ã®åé¡ãåŒãèµ·ãããªãããã«ããŠãã ãããã¹ã¯ãªãŒã³ãªãŒããŒãæ§é ãæ£ããè§£éãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ããã¹ãŠã®ããã€ã¹ã§äžè²«ããŠããããšã確èªããŠãã ããã
çµè«
CSS Containmentãç¹ã«`contain: size`ã«ããã³ã³ãã寞æ³ã®åé¢ã¯ããŠã§ãã®ããã©ãŒãã³ã¹ãåäžãããããäºæž¬å¯èœãªã¬ã€ã¢ãŠããäœæããããã®åŒ·åãªããŒã«ã§ããã³ã³ãã€ã³ã¡ã³ãã®å©ç¹ãçè§£ããããšã§ãéçºè ã¯ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæé©åããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããã¶ã€ã³ã®ä¿å®ã容æã«ããããšãã§ããŸãããªãŒã¹ãã©ãªã¢ã®eã³ããŒã¹ãã©ãããã©ãŒã ãããã©ãžã«ã®ãã¥ãŒã¹ãŠã§ããµã€ããŸã§ãã³ã³ãã寞æ³ã®åé¢ã®ååã¯ãäžçäžã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããã«å¹æçã«é©çšã§ããŸãããã®ãã¯ããã¯ãåãå ¥ããããšã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåäžãããã ãã§ãªããå Žæãããã€ã¹ã«é¢ä¿ãªãããªãŒãã£ãšã³ã¹ã«ãšã£ãŠããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«è²¢ç®ããŸããããã«ãããããå æ¬çã§ã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ããå®çŸããŸãããŠã§ããé²åãç¶ããäžã§ãCSS Containmentããã¹ã¿ãŒããããšã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ããã«é«éã§å¹ççããã€ä¿å®å¯èœãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšåªåãããã¹ãŠã®ãŠã§ãéçºè ã«ãšã£ãŠè²Žéãªè³ç£ãšãªãã§ãããã